<template>
  <view>
    <view
      v-if="
        checkedOrg.orgAvailable &&
        (!checkedOrg.appList || checkedOrg.appList.length === 0)
      "
      class="empty-view"
    >
      <u-empty
        text="请联系管理员给您赋予应用权限"
        mode="permission"
        :fontSize="32"
        color="#ff9900"
        icon-color="#fcbd71"
      ></u-empty>
    </view>
    <view v-if="!checkedOrg.orgAvailable" class="empty-view">
      <u-empty
        text="当前组织已被禁用"
        mode="permission"
        :fontSize="32"
        color="#ff9900"
        icon-color="#fcbd71"
      ></u-empty>
    </view>
    <template v-else>
      <view v-if="!checkedOrg.accountAvailable" class="empty-view">
        <u-empty
          text="您的账户已被组织禁用，请联系管理员"
          mode="permission"
          :fontSize="32"
          color="#ff9900"
          icon-color="#fcbd71"
        ></u-empty>
      </view>
      <template v-else>
        <template v-if="messageList.length > 0">
          <messageItemVue
            v-for="(item, index) in messageList"
            :key="item.msgId"
            :curr-item="item"
            :messageTypeList="messageTypeList"
            :last-item="messageList[index - 1]"
            @reload="reload"
          />
          <view class="u-p-20">
            <u-loadmore :status="status" :load-text="loadText" />
          </view>
        </template>
        <view v-else class="empty-view">
          <u-empty text="暂无数据" type="data"></u-empty>
        </view>
      </template>
    </template>
  </view>

  <u-tabbar v-model="current" :list="tabbar" active-color="#2979ff"></u-tabbar>
</template>

<script lang="ts" setup>
import messageItemVue from './components/messageItem.vue';
import { tabbar } from '@/common/tabbar';
import { getMsgDetailPage, msgUpdateRead } from '@/api/modules/message';
import { getDictdata } from '@/api/modules/user';
import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import useOrgAuth from '@/hooks/useOrgAuth';

const current = ref(2);
const status = ref('loadmore');
const loadText = {
  loadmore: '加载更多',
  loading: '努力加载中',
  nomore: '没有更多了',
};

const { checkedOrg } = useOrgAuth();

const messageList = ref<any[]>([]);
const pageNum = ref(1);
const listTotla = ref(0);

const queryList = (pageSize = 10) => {
  if (listTotla.value !== 0 && messageList.value.length === listTotla.value) {
    return;
  }
  status.value = 'loading';
  getMsgDetailPage({
    selectType: 1,
    msgType: 1,
    pageSize,
    pageNum: pageNum.value,
  }).then((res: any) => {
    messageList.value = messageList.value.concat(res.list);
    listTotla.value = res.total;
    uni.stopPullDownRefresh();
    if (messageList.value.length === listTotla.value) {
      status.value = 'nomore';
    } else {
      status.value = 'loadmore';
    }
  });
};

const reload = () => {
  pageNum.value = 1;
  messageList.value = [];
  queryList();
};

const messageTypeList = ref<any[]>([]);
const queryDict = () => {
  getDictdata({ flag: 'MSG_BUSINESS_TYPE' })
    .then((res: any) => {
      messageTypeList.value = res.MSG_BUSINESS_TYPE;
    })
    .catch(() => {});
};

onShow(() => {
  console.log('onshow');
  pageNum.value = 1;
  messageList.value = [];
  queryList();
  queryDict();
});

const scroll = () => {};
const scrolltoupper = () => {
  pageNum.value += 1;
  queryList();
  console.log('触底了');
};
onReachBottom(() => {
  console.log('-------------onReachBottom');

  scrolltoupper();
});

onPullDownRefresh(() => {
  console.log('-------------onPullDownRefresh');
  pageNum.value = 1;
  messageList.value = [];
  queryList();
});
</script>

<style lang="scss">
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}
.empty-view {
  width: 100%;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>
